var MDetail = Vue.component('MDetail', {

    data() {
        return {
            type: 0, // nav 类型
        }
    },
    
    template: `<div class="">
                    <div class="manifest__detail__top">
                        <div class="manifest__top__left">
                            <img src="" alt="">
                            <span>收藏该产品</span>
                        </div>
                        <div class="manifest__top__center">
                            <h6>货单名称</h6>
                            <div class="manifest__center__info">
                                <p>分类：</p>
                                <p>款号：</p>
                                <p>款式名称：</p>
                                <p>适用场景：</p>
                                <p>材质：</p>
                                <p>工艺要求：</p>
                                <p>外发要求：</p>
                                <p>外发范围</p>
                                <p>生产要求：</p>
                                <p>数量：</p>
                                <p>预算：</p>
                            </div>
                            <div class="manifest__center__start">
                                <span>最迟XXXX发货</span>
                            </div>
                            <div class="manifest__center__num">
                                <span>当前参与抢单的过程有XXX家</span>
                            </div>
                            <div class="manifest__center__time">
                                <span>倒计时：</span>
                            </div>
                            <div class="manifest__center__btn">
                                <a href="javascript:;">抢单保证金</a>
                                <a href="JavaScript:;">立即抢单</a>
                            </div>
                        </div>
                        <div class="manifest__top__right">
                            <h6>公司名称</h6>
                            <div class="manifest__right__info">
                                <p>
                                    <span>公司地址：</span>
                                    <b>地址</b>
                                </p>
                                <p>
                                    <span>联系方式：</span>
                                    <b>1888888888</b>
                                </p>
                                <p>
                                    <span>合同履行率：</span>
                                    <b>100%</b>
                                </p>
                                <p>
                                    <span>客户满意度：</span>
                                    <b>100%</b>
                                </p>
                            </div>
                            <div class="manifest__right__evaluate">
                                <span>评价等级</span>
                                <i></i>
                                <i></i>
                                <i></i>
                                <i></i>
                                <i></i>
                            </div>
                            <div class="manifest__right__enter">
                                <a href="javascript:;">进入公司主页</a>
                                <span>收藏该公司</span>
                            </div>
                        </div>
                    </div>
                    <div class="manifest__detail__bottom">
                        <div class="manifest__bottom__nav" @click="setTypeFun">
                            <span data-type="0" :class="{spanSelect: type == 0}">详细参数</span>
                            <span data-type="1" :class="{spanSelect: type == 1}">评价统计</span>
                        </div>
                        <!-- 参数 -->
                        <div class="manifest__bottom__para" v-show="type == 0">
                            <div class="manifest__para__left">
                                <img src="" alt="">
                                <img src="" alt="">
                                <img src="" alt="">
                                <img src="" alt="">
                                <img src="" alt="">
                            </div>
                            <div class="manifest__para__right">
                            <div class="manifest__para__size">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="4">尺码选择</th>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>白</td>
                                            <td>红</td>
                                            <td>蓝</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> 
                            <div class="manifest__para__part">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="2">面辅料成分/缩率</th>
                                        </tr>
                                        <tr>
                                            <td>名称</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="manifest__para__use">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="4">面辅料单耗</th>
                                        </tr>
                                        <tr>
                                            <td>名称</td>
                                            <td>规格</td>
                                            <td>用量</td>
                                            <td>备注</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="manifest__para__cost">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="2">成本*备注=加工费</th>
                                        </tr>
                                        <tr>
                                            <td>房租</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>水电</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>税收</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>生活费</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>裁剪</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>缝制</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>校验</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>打眼钉扣</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>整烫</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>包装</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>货运</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>设备折旧</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>耗材损耗</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="manifest__para__type">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="4">产品类型</th>
                                        </tr>
                                        <tr>
                                            <td>名称</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="manifest__para__style">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="2">产品风格</th>
                                        </tr>
                                        <tr>
                                            <td>风格名称</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="manifest__para__model">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="2">产品款式</th>
                                        </tr>
                                        <tr>
                                            <td>款式名称</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            </div>
                        </div>
                        <!-- 评价 -->
                        <div class="manifest__bottom__evaluate" v-show="type == 1">
                            <div class="manifest__evaluate__title">
                                <span>评价等级：</span>
                                <div class="manifest__evaluate__chose">
                                    <label><input type="checkbox" name="chose" value="0">所有</label>
                                    <label><input type="checkbox" name="chose" value="1">好评</label>
                                    <label><input type="checkbox" name="chose" value="2">中评</label>
                                    <label><input type="checkbox" name="chose" value="3">差评</label>
                                </div>
                            </div>
                            <div class="manifest__evaluate__box">
                                <div class="manifest__evaluate__list">
                                    <div class="manifest__list__left">
                                        <img src="" alt="">
                                        <p>名称</p>
                                        <i>2001-01-01</i>
                                    </div>
                                    <div class="manifest__list__right">
                                        <p>一段文本</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`,
    methods: {
        setTypeFun: function (e) {
            let type = e.target.dataset.type
            this.type = type
        }
    },
})